<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<link rel="stylesheet" media="screen" href="css/docs.css" />
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />
<script type="text/javascript" src="${ctx }/datepicker/WdatePicker.js"></script>

<h1 class="page-title">自定义薪资管理 - 设定人员</h1>


<div class="container_12 clearfix leading" style="margin-bottom:0px">
    <section class="portlet grid_12 leading">

        <header>
            <h2>人员筛选</h2>
        </header>

        <section>
            <p id="select_p">筛选：

                <select name="form-timezone2" id="org_sel_${organizationId}" style="opacity: 0;" onchange="loadChildOrgSel(this, 'org_sel_${organizationId}')">
                    <option value="0">所有部门</option>
                    <s:iterator value="#request.organizations" var="org">
                    <option value="${org.id}">${org.fullName}</option>
                    </s:iterator>
                </select>
                <select name="form-timezone" id="duty_sel" style="opacity: 0;" onchange="loadGradeByDutyId(this)">
                    <option value="0">所有职位</option>
                </select>
                <select name="form-timezone3" id="grade_sel" style="opacity: 0;" onchange="loadGradeLevelByGradeId(this)">
                    <option value="0">所有职等</option>
                </select>
                <select name="form-timezone4" id="grade_level_sel" style="opacity: 0;">
                    <option value="0">所有职级</option>
                </select>
            </p>
            <p>工龄：

                <input name="work_year_start" type="text" id="work_year_start" size="10" onblur="checkNumber(this)"/>
                月
                -
                <input name="work_year_end" type="text" id="work_year_end" size="10" onblur="checkNumber(this)"/>
                月
                <span style="margin-left: 25px"> <input type="button" value="点击搜索" onclick="javascript:loadControlPage()"> </span>
            </p>
        </section>

    </section>
    <div class="tabs side grid_12 leading">

        <div class="clear"></div>
    </div>
</div>

<div class="container_12 clearfix leading" style="margin-top:0px">
<section class="tabs grid_6 leading">

    <header>
        <h3>筛选结果</h3>
    </header>
    <ul class="clearfix">

    </ul>
    <section>

        <section class="clearfix" style="display: block;">
            <header ></header>
            <div id="un_set_list_div" class="clearfix.wxn">
            </div>
        </section>
        <section class="clearfix" style="display: none;">
            <header class="grid_12 alpha omega">
                <h2>Tab 2</h2>
            </header>
        </section>
        <section class="clearfix" style="display: none;">
            <header class="grid_12 alpha omega">
                <h2>Tab 3</h2>
            </header>
        </section>
        <section class="clearfix" style="display: none;">
            <header class="grid_12 alpha omega">
                <h2>Tab 4</h2>
            </header>
        </section>
    </section>
</section>
<section class="tabs grid_6 leading">
    <header>
        <h3>已设定</h3>
    </header>
    <ul class="clearfix">

    </ul>
    <section>
        <section class="clearfix" style="display: block;">
            <header ></header>
            <div id="has_set_list_div" class="clearfix">
            </div>
        </section>
        <section class="clearfix" style="display: none;">
            <header class="grid_12 alpha omega">
                <h2>Tab 2</h2>
            </header>
        </section>
        <section class="clearfix" style="display: none;">
            <header class="grid_12 alpha omega">
                <h2>Tab 3</h2>
            </header>
        </section>
        <section class="clearfix" style="display: none;">
            <header class="grid_12 alpha omega">
                <h2>Tab 4</h2>
            </header>
        </section>
    </section>
</section>

<div class="tabs side grid_12 leading">
    <div class="clear"></div>
</div>
</div>

<div class="clear"></div>
<!-- <div class="container_12 clearfix leading" style=" padding-left:20px">
    <div class="form-action clearfix">
        <p><a class="button" href="#员工薪资福利管理_自定义薪资管理.html"><span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>确定提交</a></p>
    </div>
</div> -->

<div class="clear"></div>

<script type="text/javascript">
    $(function(){
        setTimeout("loadControlPage()", 600);
    });

    function loadControlPage(){
        var data = buildData();
        loadListContent('/salary/custom_user_list_un_set.xhtml', 'un_set_list', data);	//加载未设置的列表
        loadListContent('/salary/custom_user_list_has_set.xhtml', 'has_set_list', data);	//加载已设置的列表
    }

    function loadListContent(url, listId, data) {
        $.ajax(url, {
            type:"POST",
            data:data,
            dataType:"html",
            cache:false,
            success:function (contentHtml) {
                //alert(contentHtml)
                var obj = $("#"+listId+"_div");//has_set_list_div
                obj.html("");
                obj.html(contentHtml);
            },
            complete:function () {
            }
        });
    }

    function buildData(){
        var orgId = 0;
        var temp = $(".org_sel_span").length;
        if(temp > 0){
            var name = $(".org_sel_span:last").html();
            if(name == "所有部门"){
                var tempId = $(".org_sel_span:last").next("select").attr("id");
                var s = "org_sel_".length;
                orgId = tempId.substr(s, tempId.length);
            }else{
                $(".org_sel_span:last").next("select").find("option").each(function(){
                    if($(this).html() == name){
                        orgId = $(this).val();
                        return false;
                    }
                });
            }
        }
        //alert("选择的部门："+orgId)
        var data = {
            "customId":"${customId}",
            "organizationId" : "${organizationId}",
            "orgId" : orgId,
            "dutyId" : $("#duty_sel").val(),
            "gradeId" : $("#grade_sel").val(),
            "gradeLevelId" : $("#grade_level_sel").val(),
            "workYearStart" : $("#work_year_start").val(),
            "workYearEnd" : $("#work_year_end").val()
        }
        return data;
    }

    function addCheckIds(){
        var addCheckIds = findCheckedIds("work_un_set_checkbox");
        if(addCheckIds == null || addCheckIds.length == 0){
            alert("请选择要添加的员工");
            return;
        }

        var data = {
            "customId":"${customId}",
            "add_work_ids":addCheckIds.join(",")
        }
        $.ajax("salary/custom_user_add.xhtml", {
            type:"POST",
            data:data,
            dataType:"json",
            cache:false,
            success:function (message) {
                //alert(message);
            },
            complete:function () {
                loadControlPage();
            }
        });
    }
    function deleteCheckIds(){
        var delCheckIds = findCheckedIds("work_has_set_checkbox");
        if(delCheckIds == null || delCheckIds.length == 0){
            alert("请选择要删除员工");
            return;
        }

        var data = {
            "customId":"${customId}",
            "add_work_ids":delCheckIds.join(",")
        }
        $.ajax("salary/custom_user_delete.xhtml", {
            type:"POST",
            data:data,
            dataType:"json",
            cache:false,
            success:function (message) {
                //alert(message);
            },
            complete:function () {
                loadControlPage();
            }
        });
    }


    function loadChildOrgSel(obj, selId){
        var orgId = $(obj).val();
        var orgName = $(obj).find("option:selected").text();
        $("#"+selId).prev("span").html(orgName);
        //清除子部门
        var nextOrgs = $("#uniform-"+selId).nextAll("div.org_sel").each(function(){
            $(this).remove();
        });
        //选择所有部门，删除子部门
        if(orgId <= 0){
            resetDuty();
            resetGrade();
            resetGradeLevel();
        }else{
            loadChildren(selId, orgId);
            loadDutyByOrgId(orgId);
        }
    }
    function loadChildren(selId, parentId) {
        $.ajax({
            type:"post",
            url:"/ajax/organization-children.xhtml?parentId=" + parentId,
            dataType:"json",
            success:function (data) {
                if (data != null && data.length > 0) {
                    var strHTML = "<div id=\"uniform-org_sel_" + parentId + "\" class=\"selector org_sel\">";
                    strHTML += "<span style=\"-moz-user-select: none;\" class='org_sel_span'>所有部门</span>";
                    strHTML += "<select style='opacity: 0;' id='org_sel_"+parentId+"' onchange=\"loadChildOrgSel(this, 'org_sel_"+parentId+"')\">"; //this, 'org_sel_" + parentId + "'
                    strHTML += "<option value=\"-1\">所有部门</option>";
                    $.each(data, function (i, org) {
                        strHTML += "<option value=\"" + org.id + "\">" + org.fullName + "</option>";
                    });
                    strHTML += "</select></div>";
                    $("#uniform-" + selId).after(strHTML);
                }
            }
        });
    }
    function loadDutyByOrgId(orgId) {
        $.ajax({
            type:"post",
            url:"/ajax/duty-list.xhtml?organizationId=" + orgId,
            //data: "name=John&location=Boston",
            dataType:"json",
            success:function (data) {
                var strHTML = "<option value=\"-1\">所有职位</option>";
                if (data != null && data.length > 0) {
                    $.each(data, function (i, duty) {
                        strHTML += "<option value=\"" + duty.id + "\">" + duty.dutyName + "</option>";
                    });
                }
                $("#duty_sel").html(strHTML);
            }
        });
    }
    function loadGradeByDutyId(obj){
        var dutyId = $(obj).val();
        if(dutyId <= 0){
            resetGrade();
            resetGradeLevel();
        }else{
            $.ajax({
                type:"post",
                url:"/ajax/grade-list.xhtml?dutyId=" + dutyId,
                dataType:"json",
                success:function (data) {
                    var strHTML = "<option value=\"-1\">所有职等</option>";
                    if (data != null && data.length > 0) {
                        $.each(data, function (i, grade) {
                            strHTML += "<option value=\"" + grade.id + "\">" + grade.gradeName + "</option>";
                        });
                    }
                    $("#grade_sel").html(strHTML);
                }
            });
        }
    }
    function loadGradeLevelByGradeId(obj){
        var gradeId = $(obj).val();
        if(gradeId <= 0){
            resetGrade();
            resetGradeLevel();
        }else{
            $.ajax({
                type:"post",
                url:"/ajax/grade-level-list.xhtml?gradeId=" + gradeId,
                dataType:"json",
                success:function (data) {
                    var strHTML = "<option value=\"-1\">所有职级</option>";
                    if (data != null && data.length > 0) {
                        $.each(data, function (i, grade) {
                            strHTML += "<option value=\"" + grade.id + "\">" + grade.gradeSort + "</option>";
                        });
                    }
                    $("#grade_level_sel").html(strHTML);
                }
            });
        }
    }
    function resetDuty(){
        $("#duty_sel").html("<option value=\"-1\">所有职位</option>");
        $("#duty_sel").prev("span").html("所有职位");
    }
    function resetGrade(){
        $("#grade_sel").html("<option value=\"-1\">所有职等</option>");
        $("#grade_sel").prev("span").html("所有职等");
    }
    function resetGradeLevel(){
        $("#grade_level_sel").html("<option value=\"-1\">所有职级</option>");
        $("#grade_level_sel").prev("span").html("所有职级");
    }
    function checkNumber(obj){
        var v = $(obj).val();
        if(isNaN(v)){
            alert("工龄必须为数字");
            $(this).val("");
        }
    }

</script>